import React from 'react';
import {Link} from "react-router-dom";
import {useQuery} from "../Helpers";


export default function Pagination({page, numPages}) {
    const query = useQuery()
    const keyword = query.get('keyword')

    let prevPage = `?page=${page - 1}`
    let nextPage = `?page=${page + 1}`

    // 查找时分页的上一页和下一页
    if (!!keyword) {
        prevPage = `?keyword=${keyword}&page=${page - 1}`
        nextPage = `?keyword=${keyword}&page=${page + 1}`
    }

    return (
        <nav className="blog-pagination d-flex justify-content-around page-nav mt-5">
            {page >> 1 ? (
                <Link className="ms-3 me-auto" to={prevPage}
                      data-toggle="tooltip" data-placement="left" title="上一页">
                    <svg width="1em" height="1em" viewBox="0 0 16 16"
                         className="bi bi-chevron-double-left" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fillRule="evenodd"
                              d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                        <path fillRule="evenodd"
                              d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                    上一页
                </Link>
            ) : null}

            {page < numPages ? (
                <Link className="me-3 ms-auto" to={nextPage}
                      tabIndex="-1" data-toggle="tooltip" data-placement="right"
                      title="下一页">
                    下一页
                    <svg width="1em" height="1em" viewBox="0 0 16 16"
                         className="bi bi-chevron-double-right" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fillRule="evenodd"
                              d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
                        <path fillRule="evenodd"
                              d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </Link>
            ) : null}

        </nav>
    );
};
